<template>
  <view class="cart">
    <!-- 当我们看到页面无从下手的时候 可以根据事件进行划分 -->
    <!-- 购物车头部 -->
    <view class="cart-top" @tap="chooseAddress">
      <block v-if="address.userName">
        <!-- 收货人 -->
        <view class="cart-top-content">
          <view class="cart-consignee">收货人：{{address.userName}}</view>
          <view class="cart-phone">{{address.telNumber}}</view>
        </view>
        <!-- 收货地址 -->
        <view class="address">收货地址：{{address.userAddress}}</view>
      </block>
      <block v-else>
        <view class="addConsignee">新增收件人</view>
      </block>
    </view>
    <!-- 购物车内容 -->
    <view class="cart-content">
      <!-- 购物车标题 -->
      <view class="cart-content-title">
        <span>图标</span>
        优购生活馆
      </view>
      <block v-for="(item,index) in cartList" :key="index">
        <!-- 购物车item -->
        <view v-if="item.state==true"  @tap="gogogo(index)" class="cart-content-item">
          <view class="item-content">
            <!-- 商品图片 -->
            <view class="item-img">
              <img :src="item.goods_small_logo" alt>
            </view>
            <!-- item描述 -->
            <view class="item-desc">
              <view>{{item.goods_name}}</view>
              <view>
                <view class="item-price">￥{{item.goods_price}}</view>
                <view>
                  <span class="count">×&nbsp;{{item.count}}</span>
                </view>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
    <button type="primary" @tap="orderPay">订单支付</button>
  </view>
</template>

<script>
import { orderPay } from '@/api'
export default {
  data() {
    return {
      address: {
        userName: '',
        telNumber: '',
        userAddress: ''
      },
      cartList: {

      },
      cartLength: 0,//记录我对象的键的个数 相当于获取了对象有多少个值
      order_number: ''
    }
  },
  methods: {
    //获取收货人信息
    chooseAddress() {
      console.log(123)
      //微信api中提供了添加收件人信息的的事件在开放接口
      wx.chooseAddress({
        success: (res) => {
          //收件人名字
          this.address.userName = res.userName
          //号码
          this.address.telNumber = res.telNumber
          //具体地址 可以拼接字符串凑成完整的地址
          this.address.userAddress = res.provinceName + res.provinceName + res.cityName + res.countyName
          console.log(this.address)
          /* 将我们添加的收件人 存储到本地 我们以后进来可以获取我们之前增加的收件人 */
          wx.setStorageSync('address', this.address)
        }
      })
    },
    //方便调试的跳转
    gogogo(index) {
      wx.navigateTo({ url: `/pages/good_detail/main?goods_id=${index}` });
    },
    //点击订单支付
    orderPay() {
      orderPay({ order_number: this.order_number })
        .then(res => {
            //解构赋值获取我们微信支付需要的参数
            console.log(res)
          let {wxorder} = res.data.message
          //发起微信支付
          wx.requestPayment({
            ...wxorder,//参数都在里面 通过展开运算符可以展开每个属性
            success:(res)=> {
                console.log(res)
                //完成支付后我们应该将我们的本地保存的购物车中被选中的数据进行删除
                for(let key in this.cartList){
                    if(this.cartList[key].state){
                        delete this.cartList[key]
                    }
                }
                //我们的mpvue还有些关于双向数据绑定不同同步更新的问题 我们需要将我们的cartlist转成新的对象才会同步
                this.cartList = JSON.parse(JSON.stringify(this.cartList))
                //重新将删除后的数据保存回本地
                wx.setStorageSync('carts',this.cartList)
             },
            fail(res) { }
          })
        })

    }

  },
  onLoad(query) {
    //页面加载的时候获取我们本地存储的用户信息 我们进来就不用再是新增用户了
    // 我们一开始是没有address这个键的 我们可以先给this.address先设置一个空对象 不然会一直不存在
    this.address = wx.getStorageSync('address') || {};
    this.order_number = query.order_number
  },
  onShow() {
    //页面加载获取本地的加入购物车的数据
    this.cartList = wx.getStorageSync('carts')

  },
  computed: {
    allPrice() {
      //页面加载的时候先获取总数和总价
      this.allCount = 0
      let allPrice = 0
      for (let key in this.cartList) {
        if (this.cartList[key].state) {
          allPrice += this.cartList[key].count * this.cartList[key].goods_price
          this.allCount++
        }
      }
      //通过keys我们可以返回一个我们this.cartList对象所有的键组成的数组我们可以获取 数组的长度
      this.cartLength = Object.keys(this.cartList).length
      return allPrice
    }
  }
}
</script>

<style lang='scss'>
.cart-top {
  font-size: 32rpx;
  padding: 0 25rpx;
  border-bottom: 20rpx solid #ccc;
  .addConsignee {
    text-align: center;
    padding: 40rpx 0;
    font-size: 32rpx;
    &::after {
      content: "+";
    }
  }
  .cart-top-content {
    display: flex;
    justify-content: space-between;
    line-height: 86rpx;
    .cart-consignee {
    }
    .cart-phone {
      &::after {
        content: ">";
        padding-left: 50rpx;
        font-size: 40rpx;
        color: #666;
      }
    }
  }
  .address {
    margin-bottom: 50rpx;
  }
}
.cart-content {
  .cart-content-title {
    padding: 30rpx;
    font-size: 30rpx;
    border-bottom: 1px solid #999;
  }
  .cart-content-item {
    display: flex;
    .item-change {
      width: 100rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
    }
    .item-content {
      flex: 1;
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1px solid #ddd;
      .item-img {
        width: 180rpx;
        height: 200rpx;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .item-desc {
        flex: 1;
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;
        padding: 0 20rpx;
        font-size: 30rpx;
        .item-price {
          color: red;
        }
        view {
          &:nth-of-type(2) {
            display: flex;
            justify-content: space-between;
          }
          &:nth-of-type(2) {
            .addCount {
              display: inline-block;
              width: 60rpx;
              height: 50rpx;
              text-align: center;
              line-height: 50rpx;
              border-radius: 5px;
              border: 2px solid #666;
            }
            .count {
              padding: 0 35rpx;
            }
          }
        }
      }
    }
  }
}
.icon-xuanze-fill {
  color: #ff2d4a;
}
.cart-footer {
  position: fixed;
  display: flex;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  > view {
    flex: 1;
    &:nth-of-type(1),
    &:nth-of-type(3) {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
    }
    &:nth-of-type(1) {
      span {
        margin-right: 20rpx;
      }
    }
    &:nth-of-type(3) {
      background-color: #ff2d4a;
      color: #fff;
    }
    &:nth-of-type(2) {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
      .count-allPrice {
        font-size: 32rpx;
        span {
          color: #ff2d4a;
        }
      }
      .sportPrice {
        font-size: 28rpx;
        color: #bbb;
      }
    }
  }
}
</style>


